<template>
    <div class="order-container">
  
      <!-- 订单列表 -->
      <div class="order-list">
        <!-- 时代灯饰订单 -->
        <div class="order-item" v-for="item in orderList" :key="item.id">
          <div class="order-header">
            <div class="store-info">
              <img
                  :src="item.shop.logo"
                  style="width: 120rpx; height: 120rpx;object-fit: cover;border-radius: 50%;"
                  mode="fill"
                ></img>
            </div>
            <div>
              <div class="store-name">{{ item.shop.name }}</div>
              <div class="store-label">
                  <div>{{ item.shop?.mobile || "" }}</div>
                  <div>业务员：{{ item.sales_person_name || '无绑定'}}</div>
              </div>
            </div>
            <div class="store-next">
              <text class="gui-icons gui-block  gui-text" style="line-height: 44rpx;font-size: 48rpx;color: #808080;">&#xe601;</text>
            </div>
          </div>
  
          <!-- 订单总结 -->
          <div class="order-footer">
            <div class="order-actions">
              <button
                class="action-btn"
                @click="sendStoreOpen(item,'brand')"
                v-if="checkRoles('wx_setbrand','btn')"
              >
                关联品牌
              </button>
              <button class="action-btn" @click="sendStoreOpen(item,'discount')" v-if="checkRoles('wx_setdiscount','btn')">
                设置折扣
              </button>
              <button class="action-btn" @click="sendStoreOpen(item,'order')" v-if="checkRoles('wx_proxysingle','btn')">
                代客下单
              </button>
            </div>
          </div>
        </div>
        <div v-if="orderList.length === 0" class="empty-order">
          <gui-image
            src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"
          ></gui-image>
          <div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
            暂无数据~
          </div>
        </div>
      </div>
   
  
      <gui-modal ref="setPopup" title="店铺设置" isCloseBtn 
          titleStyle="line-height:100rpx; font-size:40rpx;color:white;">
          <view class="gui-radio-lable" slot="content">
             <view style="min-height: 140rpx;">
              <span class="set-item" v-if="typeAction === 'discount'">折扣：<input  style="border-bottom: 0.5px solid #fdeded;padding: 0 5px;" type="digit" v-model="sendInfo.discount" placeholder="请输入店铺专属折扣"/></span>
             </view>
          </view>
          <view slot="btns" class="gui-flex gui-align-items-center gui-justify-content-center  gui-border-t height">
              <button class="gui-btn cancel" @click="cancel">取消</button>
              <button class="gui-btn success" @click="sendGoods">确定</button>
          </view>
      </gui-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue";
  import { getOrderList,saveDiscount,saveBrand } from "@/api/store";
  import { onShow, onShareAppMessage } from "@dcloudio/uni-app";
  import { bc, showToast } from "@/utils/helper";
  
  const sendInfo = reactive({
    id: undefined,
    discount: undefined,
    brand_ids: [],
    select_brand_names:[],
  });
  const query = reactive({
    page: 1,
    limit: 999,
  });
  const orderList = ref([]);
  const getOrderListData = async () => {
    const { data } = await getOrderList(query);
    console.log(data);
    orderList.value = data.filter(item => item.audit_status === 2)
  };
  const setPopup = ref(null);
  const typeAction = ref(null);
  const sendStoreOpen = (item,type) => {
      typeAction.value = type;
      switch(type){
          case 'brand':
              uni.navigateTo({
                  url: `/pages/audit/brandStore?id=${item.id}&brand_ids=${item.brand.map(item => item.id)}`
              });
              break;
          case 'discount':
              sendInfo.id = item.id;
              sendInfo.discount = item.discount;
              setPopup.value.open();
              break;
          case 'order':
              uni.navigateTo({
                  url: `/pages/audit/proxyStoreSingle?id=${ item.shop_id }&&name=${item.shop?.name}&&supplier_shop_id=${item.id}` 
              });
              break;
      }
  };
  
  const cancel = () => {
      Object.assign(sendInfo, { id: undefined,discount: undefined,brand_ids: [] })
      setPopup.value.close();
  }
  
  const sendGoods = async () => {
      switch(typeAction.value){
          case 'discount':
              await saveDiscount({
                  id: sendInfo.id,
                  discount: sendInfo.discount,
              });
              break;
      }
      await getOrderListData();
      showToast('保存成功');
      cancel();
  };
  onShow(() => {
    getOrderListData();
  });
  </script>
  
  <style scoped>
  .order-container {
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  /* 选项卡样式 */
  .tab-container {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #333;
    position: relative;
    white-space: nowrap;
  }
  
  .tab-item.active {
    color: #1989fa;
  }
  
  .tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #1989fa;
  }
  
  /* 订单列表样式 */
  .order-list {
    padding: 20rpx;
  }
  
  .order-item {
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
  }
  
  .order-header {
      display: flex;
      gap: 20rpx;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1px solid #f5f5f5;
  }
  
  .store-info {
    display: flex;
    align-items: center;
  }
  
  .store-icon {
    margin-right: 10rpx;
    font-size: 32rpx;
  }
  
  .store-name {
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  .store-label{
      font-size: 28rpx;
      color: #858585;
      display: flex;
      gap: 20rpx;
  }
  .store-next{
      flex: 1;
      display: flex;
      justify-content: flex-end;
  }
  
  .order-status {
    font-size: 24rpx;
  }
  
  /* 商品列表样式 */
  .product-list {
    padding: 0 20rpx;
  }
  
  .product-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .product-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }
  
  .product-name {
    font-size: 28rpx;
    color: #333;
  }
  
  .product-quantity {
    font-size: 28rpx;
    color: #999;
  }
  
  .product-spec {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
  }
  
  .product-price {
    font-size: 28rpx;
    color: #ff4d4f;
  }
  
  /* 订单底部样式 */
  .order-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx;
  }
  
  .order-total {
    font-size: 26rpx;
    color: #333;
    text-align: right;
  }
  
  .order-actions {
    display: flex;
  }
  
  .action-btn {
    margin-left: 20rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #6cb4fe;
    background-color: #fff;
    color: #409eff;
    border-color: #409eff;
  }
  
  .share-btn {
    color: #409eff;
    border-color: #409eff;
  }
  
  .cancel-btn {
    color: #666;
  }
  
  
  .ship-btn {
    color: #409eff;
    border-color: #409eff;
  }
  .send-container {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 10rpx;
    border-bottom: 1px solid #fff;
  }
  .send-label {
    position: relative;
    top: -4px;
  }
  .color {
    background-image: linear-gradient(45deg, #abda75, #008aff) !important;
  }
  .empty-order {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    flex-direction: column;
  }
  
  .set-item{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10rpx;
  }
  .cancel{
      padding: 10rpx;
      flex: 1;
      background-color: #fff; 
      color: #333;
  }
  .success{
      flex: 1;
      padding: 10rpx;
      background-color: #fff;
      color: #3399ff;
  }
  </style>
  